<template>
	<view class="container">
		<view class="product-box" v-for="(item,index) in shopList">
			<!-- 店铺名 -->
			<view class="store">
				<image class="checkbox-ok" src="../../static/check.png" mode="" v-if="item.dflag" @click="selected(item)"></image>
				<view class="checkbox" v-else @click="selected(item)"></view>
				<view class="store-title">{{item.communityName}}</view>
			</view>
			<!-- 商品详情 -->
			<view class="product-detail" v-for="(i,t) in item.cartGoodsList">
				<image class="checkbox-ok" src="../../static/check.png" mode="" v-if="i.flag" @click="selecteditem(i,item)"></image>
				<view class="checkbox" v-else @click="selecteditem(i,item)"></view>
				<image class="product-img" :src="i.picUrl" mode=""></image>
				<view class="product-norms">
					<view class="product-title">{{i.goodsName}}</view>
					<view class="norms">{{i.specifications | text}}</view>
					<view class="price">
						<view class="price-num" v-if="i.isEnableGrade==0">{{i.integral}}积分</view>
						<view class="price-num" v-if="i.isEnableGrade==1">￥{{i.price}}</view>
						<view class="price-num" v-if="i.isEnableGrade==2">
							￥{{i.price}}+{{i.integral}}积分</view>
						<view class="num-box">
							<view @click="downNum(i)">-</view>
							<view class="num">{{i.num}}</view>
							<view @click="upNum(i)">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noimgbox" v-if="shopList.length==0">
			<image src="../../static/noimg/nonews.png" class="noimg"></image>
		</view>
		<!-- 底部 -->
		<view class="bottom" v-if="shopList.length>0">
			<view class="total-check" @click="allSelect">
				<image class="checkbox-ok" src="../../static/check.png" mode="" v-if="isAllselected"></image>
				<view class="checkbox" v-else></view>
			</view>
			<view class="total-text" @click="allSelect">全选</view>
			<view class="delete" v-if="goodslist.length>0" @click="del">删除</view>
			<view class="heji">
				<text class="heji-text" v-if="price!=0||integral!=0">合计：</text>
				<text class="heji-price" v-if="price!=0&&integral==0">￥{{price}}</text>
				<text class="heji-price" v-if="price==0&&integral!=0">{{integral}}积分</text>
				<text class="heji-price" v-if="price!=0&&integral!=0">￥{{price}}+{{integral}}积分</text>
			</view>
			<view class="gopay" @click="topay">去结算</view>
		</view>
	</view>
</template>
<script>
	import {cartList,updateShoppingCart,delcart} from '../../api/product.js'
	export default{
		data(){
			return{
				store:false,
				pro:false,
				total:false,
				deleted:false,
				number:1,
				num:1,
				shopList:[],
				isAllselected:false,
				dplist:[],
				goodslist:[],
				carlist:[],
				price:0,
				integral:0
			}
		},
		filters: {
			text(val) {
				let s = val.replace(/\"/g, "")
				let ss = s.replace(/\[/g, "")
				let sss = ss.replace(/\]/g, "")
				return sss
			},
		},
		watch: {
			//监听数组内部flag变化
		    shopList: {
				handler(val, oldVal){
					this.dplist=[]
					this.goodslist=[]
					this.carlist=[]
					this.price=0
					this.integral=0
					let array=[]
					this.shopList.forEach(it=>{
						let obj={}
						obj.cartId=it.cartId
						if(it.dflag==true){
							this.dplist.push(it.cartId)
						}
						let arr=[]
						it.cartGoodsList.forEach(item=>{
							if(item.flag==true){
								this.price=this.price+item.price*item.num
								this.integral=this.integral+item.integral*item.num
								arr.push(item.cartGoodsId)
								this.goodslist.push(item.cartGoodsId)
							}
						})
						obj.cartGoodsId=arr.join(',')
						array.push(obj)
					})
					array.forEach(item=>{
						if(item.cartGoodsId!=''){
							this.carlist.push(item)
						}
					})
					console.log(this.carlist)
				},
		      deep:true
		    }
		},
		onLoad() {
			
		},
		onShow() {
			this.num=1
			this.shopList=[]
			this.dplist=[]
			this.goodslist=[]
			this.carlist=[]
			this.getCartList()
			
		},
		onReachBottom() {
			this.getCartList()
		},
		methods:{
			topay(){
				uni.navigateTo({
					url:"/pages/order/porder?iscar=true&data="+JSON.stringify(this.carlist)
				})
			},
			async del(){
				let data={cartGoodsIdList:this.goodslist.join(",")}
				if(this.dplist.length>0){
					data.cartIdList=this.dplist.join(",")
				}
				this.showMd("是否确认删除",()=>{
					this.post(delcart,data).then((res)=>{
						this.shopList=[]
						this.num=1
						this.getCartList()
					})
				})
			},
			upNum(item){
				item.num++
				this.post(updateShoppingCart,{
					cartGoodsId:item.cartGoodsId,
					num:item.num
				}).then(res=>{
					console.log(res)
				})
			},
			downNum(item){
				if(item.num>1){
					item.num--
					this.post(updateShoppingCart,{
						cartGoodsId:item.cartGoodsId,
						num:item.num
					}).then(res=>{
						console.log(res)
					})
				}
			},
			
			// 获取购物车列表
			getCartList(){
				this.get(cartList,{
					pageNum:this.num,
					pageSize:10
				}).then(res=>{
					this.num++
					console.log(res)
					res.data.forEach(item=>{
						item.dflag=false
						item.cartGoodsList.forEach(i=>{
							i.flag=false
						})
						this.shopList.push(item)
					})
				})
			},
			// 选中店铺
			selected(item) {
				if(item.dflag==false){
					item.dflag=true;
					item.cartGoodsList.forEach(it=>{
						it.flag=true
					})
					let flag=true
					this.shopList.forEach(it=>{
						if(it.dflag==false){
							flag=false
						}
					})
					if(flag==true){
						this.isAllselected=true
					}
					
				}else{
					item.dflag=false
					item.cartGoodsList.forEach(it=>{
						it.flag=false
					})
					this.isAllselected=false
				}
			},
			// 选中商品
			selecteditem(item,row){
				if(item.flag==false){
					item.flag=true;
					let flags=true;
					row.cartGoodsList.forEach(it=>{
						console.log(it.flag)
						if(it.flag==false){
							flags=false
						}
					})
					if(flags==true){
						row.dflag=true
						let flag=true
						this.shopList.forEach(it=>{
							if(it.dflag==false){
								flag=false
							}
						})
						if(flag==true){
							this.isAllselected=true
						}
					}
				}else{
					item.flag=false
					row.dflag=false
					this.isAllselected=false
				}
			},
			// 全选商品
			allSelect() {
				if(this.isAllselected==false){
					this.isAllselected=true
					this.shopList.forEach(item=>{
						item.dflag=true
						item.cartGoodsList.forEach(it=>{
							it.flag=true
						})
					})
				}else{
					this.isAllselected=false
					this.shopList.forEach(item=>{
						item.dflag=false
						item.cartGoodsList.forEach(it=>{
							it.flag=false
						})
					})
				}
			}
		}
	}
</script>

<style>
	.noimgbox {
		width: 750rpx;
		height: 80vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.noimg {
		width: 226rpx;
		height: 269rpx;
	}
	page{
		background: #f5f5f5;
	}
	.container{
		padding: 0 30rpx;
		height: 100%;
	}
	.product-box{
		width: 690rpx;
		/* height: 260rpx; */
		background: #FFFFFF;
		border-radius: 6rpx;
		margin: 30rpx 0;
		padding: 20rpx;
	}
	.store{
		display: flex;
		align-items: center;
	}
	.checkbox{
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		border: 1px solid #333333;
		background-color: #FFFFFF;
	}
	.store-title{
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.checkbox-ok{
		width: 28rpx;
		height: 28rpx;
	}
	.product-detail{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	.product-img{
		width: 160rpx;
		height: 160rpx;
		margin-left: 20rpx;
	}
	.product-norms{
		margin-left: 20rpx;
	}
	.product-title{
		width: 421rpx;
		font-size: 28rpx;
		color: #333333;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.norms{
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #666666;
		width: 421rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.price{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.price-num{
		font-size: 36rpx;
		font-weight: bold;
		color: #F09238;
	}
	.num-box{
		width: 100rpx;
		text-align: right;
		display: flex;
		align-items: center;
		font-size: 30rpx;
	}
	.num{
		width: 60rpx;
		height: 36rpx;
		background: #DFDFDF;
		border-radius: 2rpx;
		text-align: center;
		margin: 0 10rpx;
	}
	.bottom{
		position: fixed;
		display: flex;
		align-items: center;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		border: 1px solid #E3E3E3;
	}
	.total-check{
		margin-left: 30rpx;
	}
	.total-text{
		margin-left: 10rpx;
		font-size: 20rpx;
		color: #333333;
	}
	.delete{
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		width: 60rpx;
		height: 40rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 40rpx;
		background-color: #F09238;
	}
	
	.heji{
		position: absolute;
		right: 200rpx;
		font-size: 30rpx;
	}
	.heji-text{
		font-weight: bold;
		color: #333333;
	}
	.heji-price{
		font-weight: bold;
		color: #F09238;
	}
	.gopay{
		width: 160rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		border-radius: 31rpx;
		font-size: 24rpx;
		line-height: 60rpx;
		text-align: center;
		color: #FFFFFF;
		position: absolute;
		right: 30rpx;
	}
</style>
